<template>
    <div>
        <h1> 4 Form Components Using Details</h1>
        <h2> 4.1 Radio Button</h2>
        <h3> 4.1.1 创建</h3>
        <ol>
            <li> label 属性相当于原生value属性</li>
            <li> v-model 属性相当于checked属性+双向绑定 绑定相同数据的v-model将会被划分为一个按钮组</li>
            <li> name 属性即为原生name属性</li>
        </ol>
        </br>
        <table>
            <tr>
                <td><input type="radio" value="male" name="male" id="r_male" checked="true">male</input></td>
                <td><input type="radio" value="female" name="male" id="r_female">female</input></td>
                <td><input type="radio" value="other" name="male" id="r_other" disabled>other</input></td>
            </tr>
        </table>
        </br>
        <el-radio v-model="r_label" label="male" border size="small">male</el-radio>
        <el-radio v-model="r_label" label="female" border size="small">female</el-radio>
        <el-radio v-model="r_label" label="other" border disabled size="small">other</el-radio>
        </br>
        </br>

        <h3>4.1.2 事件绑定</h3>
        <ol>
            <li>
                <a target="_blank" href="https://element.eleme.cn/#/zh-CN/component/radio">查看手册</a>
            </li>
            <li> 事件使用和属性使用一样，都是绑定在标签上的 </li>
            <li> @change="function_name(function_params)" 实际上就是vue的动态绑定</li>
        </ol>
        </br>
        <el-radio v-model="r_label2" label="male" border size="mini" @change="c">male</el-radio>
        <el-radio v-model="r_label2" label="female" border size="mini" @change="c">female</el-radio>


        </br>
        </br>

        <h3>4.1.3 单选按钮组</h3>
        <p> 1. 单选按钮组 el-radio-group 可以将整组的v-model绑定放置在组上</p>
        </br>
        <el-radio-group v-model="r_label3" size="mini">
            <el-radio label="1" name="r_lable3" border>alternative 1</el-radio>
            <el-radio label="2" name="r_lable3" border>alternative 2</el-radio>
            <el-radio label="3" name="r_lable3" border>alternative 3</el-radio>
        </el-radio-group>
        </br>
        </br>
        <p> 2. :label 动态绑定数字 label接收值均为字符串形式</p>
        </br>
        <el-radio-group v-model="r_label4">
            <el-radio :label=1 name="r_lable4">alternative 1</el-radio>
            <el-radio :label=2 name="r_lable4">alternative 2</el-radio>
            <el-radio :label=3 name="r_lable4">alternative 3</el-radio>
        </el-radio-group>
        </br>
        </br>
        <p> 3. text-color 以及 fill选项仅对 el-radio-button标签生效 </p>
        </br>
        <el-radio-group v-model="r_label5" text-color="#093" fill="#049">
            <el-radio-button :label=1 name="r_lable5">alternative 1</el-radio-button>
            <el-radio-button :label=2 name="r_lable5">alternative 2</el-radio-button>
            <el-radio-button :label=3 name="r_lable5">alternative 3</el-radio-button>
        </el-radio-group>
        </br>
        </br>
        <p> 4. 标签组同样可以通过 @change 绑定监听事件 </p>
        </br>
        </br>
        <h2> 4.2 Checkbox</h2>
        <h3> 4.2.1 创建</h3>
        <ol>
            <li><a target="_blank" href="https://element.eleme.cn/#/zh-CN/component/checkbox">查看手册</a></li>
            <li>v-model 属性动态绑定，相当于checked属性 与true-label共用在代码段控制选中哪个；当且仅当v-model绑定值与true-label值相同时才会显示选中</li>
            <li></li>
        </ol>
        <p>原生 - checkedbox</p>
        <table>
            <tr>
                <td>
                    <input type="checkbox" name="native_checkbox" value="swimming" id="swimming"
                        checked="true">swimming</input>
                </td>
                <td>
                    <input type="checkbox" name="native_checkbox" value="shopping" id="shopping">shopping</input>
                </td>
                <td>
                    <input type="checkbox" name="native_checkbox" value="skiing" id="skiing">skiing</input>
                </td>
                <td>
                    <input type="checkbox" name="native_checkbox" value="hiking" id="hiking">hiking</input>
                </td>
            </tr>
        </table>

        </br>
        <p>elementui - checkedbox</p>
        <el-checkbox v-model="checked" name="el_checkbox">Beijing</el-checkbox>
        <el-checkbox name="el_checkbox">Tianjin</el-checkbox>
        <el-checkbox name="el_checkbox">SHanghai</el-checkbox>
        </br>
        </br>
        <h3> 4.2.2 属性使用</h3>
        <ol>
            <li> label - 仅可在多选框组组中使用</li>
            <li> true-label - 选中时原生value</li>
            <li> false-label - 未选中时原生value</li>
            <li> disabled - 原生disable</li>
            <li> border + size - 设置边框和大小</li>
            <li> name - 原生name</li>
            <li> checked - 原生checked</li>
        </ol>
        </br>
        <p>多选框组</p>
        <el-checkbox-group v-model="checkList">
            <el-checkbox label="复选框 A"></el-checkbox>
            <el-checkbox label="复选框 B"></el-checkbox>
            <el-checkbox label="复选框 C"></el-checkbox>
            <el-checkbox label="禁用" disabled></el-checkbox>
            <el-checkbox label="选中且禁用" disabled></el-checkbox>
        </el-checkbox-group>
        </br></br>
        <h3> 4.2.3 事件使用</h3>
        <p>与radio相同，通过@change="function"进行动态绑定</p>
        </br></br>
        <h2> 4.3 Input </h2>
        </br></br>
        <h3> 4.3.1 创建</h3>
        <a target="_blank" href="https://element.eleme.cn/#/zh-CN/component/input">查看手册</a>
        </br></br>
        <h3> 4.3.2 属性使用</h3>
        </br></br>
        <h3> 4.3.3 事件使用</h3>
        </br></br>
        <h3> 4.3.4 方法使用</h3>
        <el-input clearable placeholder="please input name ... " prefix-icon="el-icon-user-solid" ref="inputs"
            :maxlength="20" size="mini"></el-input>
        </br></br>
        <el-button border size="mini" @click="changeFocus()">change focus</el-button>
        <el-button border size="mini" @click="changeBlur()">change blur</el-button>
        </br></br>
        <h2> 4.4 Summary </h2>
        </br></br>
        <img src="../assets/form-summary.jpg">
        <div align="center">img1-Summary</div></img>
        </br></br>
        <h2> 4.5 Select </h2>
        </br></br>
        <h3> 4.5.1 创建</h3>
        <p>原生组件</p>
        <select id="native_select" name="native_select">
            <option name="peony">peony</option>
            <option name="peony">lily</option>
            <option name="peony">carnation</option>
            <option name="peony">chrysanthemum</option>
        </select>
        </br>
        <p>el组件</p>
        <el-select v-model="trees">
            <el-option value="maple">maple</el-option>
            <el-option value="elm">elm</el-option>
            <el-option value="pine">pine</el-option>
            <el-option value="poplar">poplar</el-option>
            <el-option value="birch">birch</el-option>
        </el-select>
        </br>
        <p>el组件-获取远程数据加载列表</p>
        <el-select v-model="dep" multiple clearable :multiple-limit=3 @change="optionChange">
            <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id"></el-option>
        </el-select>
        </br></br>
        <h3> 4.5.2 属性使用</h3>
        <p>注意：当给select绑定事件时，一定要确定所有的select都有v-model，所有的option都有:value进行绑定</p>
        </br></br>
        <h3> 4.5.3 事件使用</h3>
        </br></br>
        <h2> 4.6 Switch </h2>
        </br></br>
        <h3> 4.6.1 创建</h3>
        <el-switch v-model="switchBox" active-color="#ff3dff" inactive-color="#ffd3ff" :width="55"></el-switch>
        </br></br>
        <h3> 4.6.2 属性</h3>
        <a target="_blank" href="https://element.eleme.cn/#/zh-CN/component/switch">查看手册</a>
        </br></br>
        <el-switch v-model="switchBox2" active-text="active" inactive-text="inactive" active-icon-class="el-icon-check"
            inactive-icon-class="el-icon-close"></el-switch>
        </br></br>
        <h2> 4.7 DatePicker</h2>
        <h3> 4.7.1 创建</h3>
        <p> 普通 </p>
        <el-date-picker v-model="createDate"></el-date-picker>
        </br></br>
        <p> 只读 </p>
        <el-date-picker v-model="createDate2" readonly></el-date-picker>
        </br></br>
        <p> 禁用 </p>
        <el-date-picker v-model="createDate3" disabled></el-date-picker>
        </br></br>
        <h3> 4.7.2 属性</h3>
        <p> 普通 </p>
        <el-date-picker v-model="createDate4" :editable="false" cleanable
            placeholder="please choose one create date"></el-date-picker>
        <p> 范围 </p>
        <el-date-picker v-model="createDate4" :editable="false" cleanable
            start-placeholder="please choose one create date" a type="daterange"
            end-placeholder="please choose one end date"></el-date-picker>
        </br></br>
        <h3> 4.7.3 shortcuts</h3>
        <p> 普通 </p>
        <a target="_blank" href="https://element.eleme.cn/#/zh-CN/component/date-picker">查看手册</a>
        <el-date-picker v-model="createDate5" :editable="false" cleanable placeholder="please choose one create date"
            :picker-options="pickerOptions"></el-date-picker>
        <h2> 4.8 Upload</h2>
        <h3> 4.8.1 创建</h3>
        <el-upload></el-upload>
        </br></br>
        <p> 普通 </p>
        </br></br>
        <h3> 4.8.2 创建</h3>
        </br></br>
        <p> 普通 </p>
        </br></br>
        <h3> 4.8.3 创建</h3>
        </br></br>
        <p> 普通 </p>
        </br></br>
        <h2> 4.9 Form</h2>
        <h3> 4.8.1 创建</h3>
        <p>是一个容器框架的形式</p>
        <ol>
            <li>首先，通过el-form创建总表格</li>
            <li>其次，通过el-form-item创建每一个表单组件</li>
            <li>el-form中通过使用 :model 属性绑定表单数据对象</li>
        </ol>
        </br></br>
        <h3> 4.8.2 属性</h3>
        <a target="_blank" href="https://element.eleme.cn/#/zh-CN/component/form">查看手册</a>
        <ol>
            <li>内联表单 - :inline="true"</li>
            <li>标签位置 - :labelPosition="top|left|right" + labelWidth="100px"</li>
            <li>标签集中处理 - label-suffix</li>
            <li>表单验证 - el-form绑定 :rule="rules" el-form-item绑定 prop属性指定每一个表单选项的校验名称
                data域设定rules对象，每个prop是对象中的一个数组属性；数组中设定相应的校验规则；
            </li>
            <li>常用校验组为 - required&type|min&max【校验内容】 + message【显示错误信息】 + trigger【触发方式】</li>
            <li>自定义规则 - validator:validatorName函数，该validatorName函数需要定义在data()域中</li>
            <li>validatorName函数需要携带三个参数: rule, value【表单控件输入值】, callback【错误校验逻辑及返回提示】</li>
        </ol>
        </br></br>
    </div>
</template>
<script>
export default {
    name: "Form",
    data() {
        return {
            // radio button
            r_label: "male",
            r_label2: "male",
            r_label3: "1",
            r_label4: 1,
            r_label5: 1,
            // checkbox
            checked: true,
            checkList: ["选中且禁用", "复选框 A"],
            //select box
            options: [
                { id: "1", name: "develope" },
                { id: "2", name: "R&D" },
                { id: "3", name: "HR" },
                { id: "4", name: "marketing" },
            ],
            dep: '',
            trees: '',
            // switch
            switchBox: 'true',
            switchBox2: 'true',
            // datePicker
            createDate: '',
            createDate2: '',
            createDate3: '',
            createDate4: '',
            createDate5: '',
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
        }
    },
    methods: {
        c() {
            alert("radio button selection changed!")
        },
        // input methods
        changeFocus() {
            this.$refs.inputs.focus();
        },
        changeBlur() {
            this.$refs.inputs.blur();
        },
        // select method
        optionChange(value) {
            console.log(value);
        },
    }
}
</script>
<style></style>